| |
あとは、JavaScript関数「titlezoom()」を自作すれば完成です。JavaScript内では、はじめに画像の最終的な横幅を変数「max」で指定しておきます。続いて、関数「titlezoom()」を作成していきますが、ここでの処理は大きく分けて以下のようになります。
（1）画像の横幅が「max」に達していない場合
（2）画像の横幅が「max」以上の場合
（1）の場合は、現在の横幅、高さを「w」「h」に取り込み、それぞれの値を画像の縦横比に応じて少しずつ増加させていきます。今回の場合は横：縦＝3：2なので、それぞれを「+3」「+2」ずつ増加し、それを新しい画像サイズとしています。一方（2）の場合は、すでに画像の拡大が終了しているので、最終的なサイズで画像を表示するように指定します。
最後に、「setTimeout("titlezoom()",1);」で関数「titlezoom()」を繰り返し実行させれば、このテクニックは完成です。 |
<SCRIPT language="JavaScript">
<!--
max=600;
function titlezoom(){
if (Math.floor(document.img01.width)<max) {
w =document.img01.width;
h =document.img01.height;
ww=Math.floor(w)+3;
hh=Math.floor(h)+2;
document.img01.width=ww;
document.img01.height=hh;
}
else if (Math.floor(document.img01.width)>=max) {
ww=max;
hh=400;
document.img01.width=ww;
document.img01.height=hh;
}
setTimeout("titlezoom()",1);
}
// -->
</SCRIPT> |
 |
|
